<template>
	<view>
		<view class="Business-card">
			<!-- <u-navbar back-icon-color="#fff" title="" background="rgba(0,0,0,0)" backIconColor="white">
				<view class="IconBox" slot="right" @click="tocardPoster">
					<u-icon name="zhuanfa" size="50" color="#fff"></u-icon>
				</view>
			</u-navbar> -->
			<view class="BusinessCardBox" :style="{'padding-bottom':selfFlag?'15px':''}">
				<view class="BusinessCard_top">
					<view class="topBmg"></view>
					<view class="userInfo">
						<view class="userInfoT">
							<view class="userImage">
								<u-avatar v-if="info.image_url" :src="getImage(info.image_url)" mode="circle" size="112"
									:show-sex="true" :sex-icon="info.gender==1?'man':'woman'"></u-avatar>
							</view>
							<view class="userInfoB">
								<view class="userNameBox">
									<view class="userName">{{info.username?info.username:"暂未设置"}}</view>
									<!-- <view class="Grade">lv6</view> -->
									<!-- #ifdef MP-WEIXIN -->
									<button open-type="share" style="margin: 0;padding: 0;background: white;border: none;outline: none;">
										<view class="shareTxt">分享</view>
									</button>
									<!-- #endif -->
									<!-- #ifdef APP -->
									<view class="shareTxt" @click="getPoster">分享</view>
									<!-- #endif -->
								</view>
								<view class="autograph">发布了内容<text style="color: #FFAC3F;">{{conNum}}</text>条，收获了<text style="color: #FFAC3F;">{{giveNum}}</text>赞</view>
							</view>
						</view>
						
						<!-- <view class="settingIcon">
							<u-icon name="setting" size="40" color="#666"></u-icon>
						</view> -->
						<view class="userIntro">
							{{info.introduce}}
						</view>
						<view class="address">
							<view v-for="(item,index) in districtList" :key="index">
								<image src="../../static/mine/quyu.png"></image>
								<view>
									{{item.BusinessAreas.name}}<text>({{item.distance}}km)</text>
								</view>
							</view>
						
						</view>
					</view>
					
				</view>
				<view class="TiktokBox">
					<view class="TiktokItem" v-for="(item,index) in cardList" :key="index" @click="toWebView" :data-url="item.url">
						<view class="TiktokImage">
							<image :src="item.image_url" mode=""></image>
						</view>
						<view class="TiktokInfo">
							<view class="TiktokNameBox">
								<view class="info_L">
									<view class="TiktokName">{{item.name}}</view>
									<view class="deliciousBox">
										<view class="deliciousItem"
											v-for="(pitem,pindex) in item.TalentAuthenticationLabel" :key="pindex" v-if="pitem.label">
											{{pitem.label.name}}</view>
									</view>
								</view>
								<view class="moneyWrap">稿费：￥{{item.money}}起</view>
								<!-- <view class="info_R" @click="toWebView">
									<view class="see">查看主页</view>
									<u-icon name="arrow-right" color="#FFAC3F" size="25"></u-icon>
								</view> -->
							</view>
							<view class="giveBox">
								<view class="giveItem">粉丝：{{item.fans_num}}</view>
								<view class="giveItem">获赞：{{item.fabulous_num}}</view>
							</view>
						</view>
						<view class="IconBox" v-if="item.platform==1">
							<image src="../../static/index/fans.png" mode=""></image>
						</view>
						<view class="BookImage" v-if="item.platform==2">
							<image src="../../static/index/Book.png" mode=""></image>
						</view>
						
						<view class="microImage" v-if="item.platform==3">
							<image src="../../static/index/micro-blog.png" mode=""></image>
						</view>
						<view class="publicImage" v-if="item.platform==4">
							<image src="../../static/index/public.png" mode=""></image>
						</view>
					</view>
				</view>
				<view style="padding: 0 24upx;" v-if="selfFlag">
					<view class="addReal" @click="toReal">
						<image src="../../static/mine/addReal.png"></image>
						<text>添加认证</text>
					</view>
				</view>
				<view class="CreativeBox">
					<view class="CreativeTitle">创作中心</view>
					<view class="CreativeList" v-if="list.length>0">
						<!-- <u-waterfall v-model="list" ref="uWaterfall">
							<template v-slot:left="{leftList}">
								<view class="foodItem" @click="toFindDetail" v-for="(item, index) in leftList" :key="index"
									:data-id="item.id" :data-type="item.imgType">
									<view class="foodImage" v-if="!item.imgType&&item.titleImage">
										<image :src="item.titleImage" mode="widthFix" style="width: 100%;"></image>
										<view class="playIcon">
											<u-icon name="play-circle-fill" size="48"></u-icon>
										</view>
									</view>
									<view class="foodImage" v-if="item.imgType&&item.titleImage">
										<image :src="item.titleImage" mode="widthFix" style="width: 100%;"></image>
									</view>
									<view class="foodName">{{item.title}}</view>
									<view class="food_B">
										<view class="userInfo">
											<view class="userImage">
												<image :src="item.userImg" mode=""></image>
											</view>
											<view class="userName" v-if="item.user">{{item.user.username}}</view>
										</view>
										<view class="giveBox">
											<view v-if="!item.UserShareCollection">
												<u-icon name="heart-fill" color="#999"></u-icon>
											</view>
											<view v-else>
												<u-icon name="heart-fill" color="#FF5555"></u-icon>
											</view>
											<view class="giveNum">{{item.collect_num}}</view>
										</view>
									</view>
								</view>
							</template>
							<template v-slot:right="{rightList}">
								<view class="foodItem" @click="toFindDetail" v-for="(item, index) in rightList" :key="index"
									:data-id="item.id" :data-type="item.imgType">
									<view class="foodImage" v-if="!item.imgType&&item.titleImage">
										<image :src="item.titleImage" mode="widthFix" style="width: 100%;"></image>
										<view class="playIcon">
											<u-icon name="play-circle-fill" size="48"></u-icon>
										</view>
									</view>
									<view class="foodImage" v-if="item.imgType&&item.titleImage">
										<image :src="item.titleImage" mode="widthFix" style="width: 100%;"></image>
									</view>
									<view class="foodName">{{item.title}}</view>
									<view class="food_B">
										<view class="userInfo">
											<view class="userImage">
												<image :src="item.userImg" mode=""></image>
											</view>
											<view class="userName" v-if="item.user">{{item.user.username}}</view>
										</view>
										<view class="giveBox">
											<view v-if="!item.UserShareCollection">
												<u-icon name="heart-fill" color="#999"></u-icon>
											</view>
											<view v-else>
												<u-icon name="heart-fill" color="#FF5555"></u-icon>
											</view>
											<view class="giveNum">{{item.collect_num}}</view>
										</view>
									</view>
								</view>
							</template>
						</u-waterfall> -->
					</view>
				</view>
				<view class="DockingBox" v-if="!selfFlag" @click="toChat">
					<view class="DockingNameBox">
						<u-icon name="chat" color="#fff" size="50"></u-icon>
						<view class="DockingName">对接合作</view>
					</view>
				</view>
			</view>
			<u-toast ref="uToast" />
		</view>
		<view class="poster">
			<image src="../../static/share/backT.png" class="backT"></image>
			<image src="../../static/share/back.png" class="backMain"></image>
			<image src="../../static/share/backB.png" class="backB"></image>
			<image src="../../static/share/backLTxt.png" class="backLTxt"></image>
			<image src="../../static/share/backRDr.png" class="backRDr"></image>
			<view class="conT">
				<view class="conAvator">
					<view class="conAvatorL">
						<image src="../../static/share/avatorBack.png" class="avatorBack"></image>
						<image :src="getImage(info.image_url)" class="avatorCon"></image>
					</view>
					<view class="conAvatorR">
						<view class="conAvatorRT">
							<view class="conAvatorRTName">{{info.username}}</view>
							<image class="conAvatorRTImg" src="../../static/share/woman.png" v-if="info.gender==2"></image>
							<image class="conAvatorRTImg" src="../../static/share/man.png"
								style="width: 28upx;height: 28upx;" v-if="info.gender==1"></image>
						</view>
						<view class="conAvatorRB">发布了内容{{conNum}}条，收获了{{giveNum}}赞</view>
					</view>
				</view>
				<view class="conUserMsg">{{info.introduce}}</view>
				<view class="conCardList">
					<view :class="['conCardItem','conCardItem'+index]" v-for="(item,index) in cardList" :key="index">
						<image src="../../static/index/index_content.png" :class="['cardAvator','cardAvator'+index]">
						</image>
						<view :class="['cardInfo','cardInfo'+index]">
							<view :class="['cardInfoName','cardInfoName'+index]">{{item.name}}</view>
							<view :class="['cardInfoMsg','cardInfoMsg'+index]">
								<view :class="['cardInfoFans','cardInfoFans'+index]">粉丝{{item.fans_num}}</view>
								<view v-if="item.platform==2" :class="['cardInfoGive','cardInfoGive'+index]">赞藏{{item.fabulous_num}}</view>
								<view v-else :class="['cardInfoGive','cardInfoGive'+index]">获赞{{item.fabulous_num}}</view>
							</view>
						</view>
						<image src="../../static/share/douyin_share.png"
							:class="['cardShareIcon','cardShareIcon'+index]" v-if="item.platform==1"></image>
						<image src="../../static/share/xiaohongshu_share.png"
							:class="['cardShareIcon','cardShareIcon'+index]" v-if="item.platform==2"></image>
						<image src="../../static/share/weibo_share.png" :class="['cardShareIcon','cardShareIcon'+index]"
							v-if="item.platform==3"></image>
						<image src="../../static/share/dianping_share.png"
							:class="['cardShareIcon','cardShareIcon'+index]" v-if="item.platform==4"></image>
						
					</view>
				</view>
			</view>
			<view class="conB">
				<!-- <view class="conBL">
					<image :src="getImage(info.image_url)" class="conBLImg"></image>
				</view> -->
				<view class="conBC">
					<view class="conBCName">与【{{info.username}}】一起在若免</view>
					<view class="conBCIntro">分享好物，更多惊喜等你搜寻！</view>
				</view>
				<view class="conBR">
					<image :src="codeImg" class="conBRImg"></image>
				</view>
			</view>
		</view>
		<canvas v-if="canvasFlag"
			:style="{'width':posterData.poster.width +'px','height':posterData.poster.height +'px'}" class="can"
			canvas-id="mycan" style="position: fixed;top: -9999999px;"></canvas>
		<!-- <view @click="getPoster"
			style="position: fixed;left: 100px;bottom: 100px;z-index: 100;background-color: white;padding: 20px;">生成海报
		</view> -->
	</view>

</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				src: 'https://hxbm-official-webstite.oss-cn-guangzhou.aliyuncs.com/1640141828733bAYA2.jpg',
				view: null,
				id: "",
				info: {},
				conNum: 0,
				giveNum: 0,
				cardList: [],
				districtList: [],
				posterData: {},
				canvasFlag: false,
				imgBaseArr:{},
				modal_qr:false,
				url:"123465",
				list:"",
				page:1,
				selfFlag:true,
				moreFlag:false,
				codeImg:""
			}
		},
		onShareAppMessage() {
			return {
			  title: '与'+this.info.username+'一起在若免。分享好物，更多惊喜等你搜寻！',
			  path: '/pages/pageone/pages/Business-card/Business-card?id='+this.id
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(e);
			if (e.type == "share") {
				console.log("点击了分享");
			}
		},
		onHide() {
			// #ifdef APP-PLUS
			// this.hide()
			// #endif
		},
		onUnload() {
			// #ifdef APP-PLUS
			// this.close()
			// #endif
		},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getConList();
		},
		onLoad(options) {
			console.log(options)
			// // #ifdef APP-PLUS
			// const subNVue = uni.getSubNVueById('popup')
			// subNVue.show()
			// // #endif
			if (options.id) {
				this.id = options.id;
			}
			if(uni.getStorageSync("rmToken")){
				if(uni.getStorageSync("userId")==this.id){
					this.selfFlag = true;
				}else{
					this.selfFlag = false;
				}
			}else{
				this.selfFlag = false;
			}
			
			// this.onShow();
			// this.showQrcode();
		},
		onShow() {
			// #ifdef APP-PLUS
			// this.create();
			// #endif
			if(this.id){
				this.getList();
				this.getUser();
				this.getDistrict();
				this.getConList();
				this.getQrcode();
			}else{
				this.initData();
			}
		},
		methods: {
			initData(){
				this.init().then(res=>{
					this.getList();
					this.getUser();
					this.getDistrict();
					this.getConList();
					this.getQrcode();
				})
			},
			init(){
				if(this.id){
					return new Promise((resolve,reject)=>{
						resolve()
					})
				}else{
					setTimeout(()=>{
						this.initData();
					},100)
				}
			},
			toChat(){
				uni.navigateTo({
					url:"/pages/pageone/pages/ChatBox/ChatBox?id="+this.id
				})
			},
			// showQrcode() {
			// 	let _this = this;
			// 	this.modal_qr = true;
			// 	// uni.showLoading()
			// 	setTimeout(function() {
			// 		// uni.hideLoading()
			// 		_this.$refs.qrcode.crtQrCode()
			// 	}, 50)
			// },
			getQrcode(){
				let obj = {};
				// #ifdef MP-WEIXIN
				obj.type = 1;
				// #endif
				// #ifdef APP
				obj.type = 2;
				// #endif
				obj.data = {};
				obj.data.type = "gr";
				obj.data.usid = this.id;
				this.$u.api.qrcode(obj).then(res=>{
					console.log(res);
					this.codeImg = res.data.data.replace(/[\n\r]/g,'');
				})
			},
			//传入组件的方法
			hideQrcode() {
				this.modal_qr = false;
			},
			getPoster() {
				// const ctx = uni.createCanvasContext('mycan');
				this.getElementInfo("poster").then(res => {
					console.log(res)
					this.canvasFlag = true;
					this.$forceUpdate()
					this.$nextTick(()=>{
						uni.showLoading({
							title:"生成海报中..."
						})
						let promiseArr = [
							this.getElementInfo("backT"),
							this.getElementInfo("backMain"),
							this.getElementInfo("backB"),
							this.getElementInfo("backLTxt"),
							this.getElementInfo("backRDr"),
							this.getElementInfo("conT"),
							this.getElementInfo("avatorBack"),
							this.getElementInfo("avatorCon"),
							this.getElementInfo("conAvatorRTName"),
							this.getElementInfo("conAvatorRTImg"),
							this.getElementInfo("conAvatorRB"),
							this.getElementInfo("conUserMsg"),
							this.getElementInfo("conBL"),
							this.getElementInfo("conBLImg"),
							this.getElementInfo("conBCName"),
							this.getElementInfo("conBCIntro"),
							this.getElementInfo("conBR"),
							this.getElementInfo("conBRImg")
						];
						for (let i = 0; i < this.cardList.length; i++) {
							promiseArr.push(this.getElementInfo("conCardItem" + i));
							promiseArr.push(this.getElementInfo("cardAvator" + i));
							promiseArr.push(this.getElementInfo("cardInfoName" + i));
							promiseArr.push(this.getElementInfo("cardInfoFans" + i));
							promiseArr.push(this.getElementInfo("cardInfoGive" + i));
							promiseArr.push(this.getElementInfo("cardShareIcon" + i));
						}
						Promise.all(promiseArr).then(res => {
							let ctx = uni.createCanvasContext('mycan');
							// this.getImageInfo("../../static/share/back.png","backMain").then(res=>{
							// 	console.log(res)
							// })
							console.log(ctx)
							ctx.drawImage("../../static/share/back.png", this.posterData.backMain.left, this.posterData.backMain
								.top, this.posterData.backMain.width, this.posterData.backMain.height);
							ctx.drawImage("../../static/share/backB.png", this.posterData.backB.left, this.posterData.backB.top,
								this.posterData.backB.width, this.posterData.backB.height);
							ctx.drawImage("../../static/share/backT.png", this.posterData.backT.left, this.posterData.backT.top,
								this.posterData.backT.width, this.posterData.backT.height);
							ctx.drawImage("../../static/share/backLTxt.png", this.posterData.backLTxt.left, this.posterData
								.backLTxt.top, this.posterData.backLTxt.width, this.posterData.backLTxt.height);
							ctx.drawImage("../../static/share/backRDr.png", this.posterData.backRDr.left, this.posterData
								.backRDr.top, this.posterData.backRDr.width, this.posterData.backRDr.height);
							ctx.save();
							console.log("`````````````````````````418")
							ctx.setFillStyle("#FFFFFF");
							ctx.setStrokeStyle('#FFFFFF')
							ctx.setLineJoin('round'); //交点设置成圆角
							ctx.setLineWidth(16);
							ctx.strokeRect(this.posterData.conT.left + 8, this.posterData.conT.top + 8, this.posterData
								.conT.width - 16, this.posterData.conT.height - 16);
							ctx.fillRect(this.posterData.conT.left + 16, this.posterData.conT.top + 16, this.posterData
								.conT.width - 32, this.posterData.conT.height - 32);
							ctx.stroke();
							ctx.closePath();
							ctx.save();
							ctx.restore();
							console.log("`````````````````````````431")
							ctx.drawImage("../../static/share/avatorBack.png", this.posterData.avatorBack.left, this.posterData
								.avatorBack.top, this.posterData.avatorBack.width, this.posterData.avatorBack.height);
							ctx.setStrokeStyle('rgba(0,0,0,0)')
							ctx.arc(this.posterData.avatorCon.width / 2 + this.posterData.avatorCon.left, this.posterData.avatorCon
								.height / 2 + this.posterData.avatorCon.top,
								this.posterData.avatorCon.width/2, 0, Math.PI * 2, false);
							ctx.clip();
							// console.log("```````````````````````````````````````````0",this.getImage(this.info.image_url))
							app.$vm.getImgBase(this.getImage(this.info.image_url)).then(avatorUrl1=>{
								console.log("```````````````````````````````````````````01")
								ctx.drawImage(avatorUrl1, this.posterData.avatorCon.left, this
									.posterData.avatorCon.top, this.posterData.avatorCon.width, this.posterData.avatorCon
									.height);
								ctx.restore();
								ctx.beginPath();
								ctx.font = "bold 16px Microsoft YaHei";
								ctx.fillStyle = "#3F3F3F";
								ctx.textBaseline = "top";
								ctx.fillText(this.info.username, this.posterData.conAvatorRTName.left, this.posterData
									.conAvatorRTName.top + 5);
								ctx.closePath();
								ctx.save();
								ctx.restore();
								if(this.info.gender==1){
									ctx.drawImage("../../static/share/man.png", this.posterData.conAvatorRTImg.left, this
										.posterData.conAvatorRTImg.top, this.posterData.conAvatorRTImg.width, this.posterData.conAvatorRTImg
										.height);
								}else if(this.info.gender==2){
									ctx.drawImage("../../static/share/woman.png", this.posterData.conAvatorRTImg.left, this
										.posterData.conAvatorRTImg.top, this.posterData.conAvatorRTImg.width, this.posterData.conAvatorRTImg
										.height);
								}
								ctx.font = "14px Microsoft YaHei";
								ctx.fillStyle = "#3F3F3F";
								ctx.textBaseline = "top";
								let str = "发布了内容" + this.conNum + "条，收获了" + this.giveNum + "赞";
								ctx.fillText(str, this.posterData.conAvatorRB.left, this.posterData
									.conAvatorRB.top + 4);
								ctx.stroke();
								ctx.closePath();
								ctx.restore();
								ctx.font = "14px";
								ctx.fillStyle = "#3F3F3F";
								ctx.textBaseline = "bottom";
								let intros = ""
								var chr = this.info.introduce.split("");
								var temp = "";
								var row = [];
								console.log(chr)
								for (var a = 0; a < chr.length; a++) {
									if (temp.length*15 < this.posterData.conUserMsg.width) {;
									} else {
										row.push(temp);
										temp = "";
									}
									temp += chr[a];
								}
								row.push(temp);
								for (var b = 0; b < row.length; b++) {
									ctx.fillText(row[b], this.posterData.conUserMsg.left, this.posterData.conUserMsg.top + (b + 1) * 20);
								}
								ctx.restore();
								
								let imgArrs = [];
								
								for(let i=0;i<this.cardList.length;i++){
									imgArrs.push(this.getImageInfo(this.cardList[i].image_url,'conCardItem'+i));
								}
								let imgArrs1 = [];
								for(let i=0;i<this.cardList.length;i++){
									imgArrs1.push(app.$vm.getImgBase(this.cardList[i].image_url));
								}
								Promise.all(imgArrs1).then(rec=>{
									for(let i=0;i<this.cardList.length;i++){
										ctx.save();
										ctx.drawImage("../../static/share/shareItem.png",this.posterData['conCardItem'+i].left,this.posterData['conCardItem'+i].top,this.posterData['conCardItem'+i].width,this.posterData['conCardItem'+i].height);
										ctx.setStrokeStyle('rgba(0,0,0,0)')
										ctx.arc(this.posterData['cardAvator'+i].width / 2 + this.posterData['cardAvator'+i].left, this.posterData['cardAvator'+i]
											.height / 2 + this.posterData['cardAvator'+i].top,
											this.posterData['cardAvator'+i].width/2, 0, Math.PI * 2, false);
										ctx.clip();
										ctx.drawImage(rec[i],this.posterData['cardAvator'+i].left,this.posterData['cardAvator'+i].top,this.posterData['cardAvator'+i].width,this.posterData['cardAvator'+i].height);
										ctx.restore();
										ctx.beginPath();
										ctx.font = "bold 14px Microsoft YaHei";
										ctx.fillStyle = "#3F3F3F";
										ctx.textBaseline = "middle";
										ctx.fillText(this.cardList[i].name, this.posterData['cardInfoName'+i].left, this.posterData['cardInfoName'+i].top + 10);
										ctx.save();
										ctx.restore();
										ctx.font = "12px Microsoft YaHei";
										ctx.fillStyle = "#3F3F3F";
										ctx.textBaseline = "middle";
										ctx.fillText('粉丝'+this.cardList[i].fans_num, this.posterData['cardInfoFans'+i].left, this.posterData['cardInfoFans'+i].top + 9);
										ctx.fillText('收获了'+this.cardList[i].fabulous_num+"赞", this.posterData['cardInfoGive'+i].left, this.posterData['cardInfoGive'+i].top + 9);
										if(this.cardList[i].platform==1){
											ctx.drawImage("../../static/share/douyin_share.png",this.posterData['cardShareIcon'+i].left,this.posterData['cardShareIcon'+i].top,this.posterData['cardShareIcon'+i].width,this.posterData['cardShareIcon'+i].height);
										}else if(this.cardList[i].platform==2){
											ctx.drawImage("../../static/share/xiaohongshu_share.png",this.posterData['cardShareIcon'+i].left,this.posterData['cardShareIcon'+i].top,this.posterData['cardShareIcon'+i].width,this.posterData['cardShareIcon'+i].height);
										}else if(this.cardList[i].platform==3){
											ctx.drawImage("../../static/share/weibo_share.png",this.posterData['cardShareIcon'+i].left,this.posterData['cardShareIcon'+i].top,this.posterData['cardShareIcon'+i].width,this.posterData['cardShareIcon'+i].height);
											
										}else if(this.cardList[i].platform==4){
											ctx.drawImage("../../static/share/dianping_share.png",this.posterData['cardShareIcon'+i].left,this.posterData['cardShareIcon'+i].top,this.posterData['cardShareIcon'+i].width,this.posterData['cardShareIcon'+i].height);
										}
										ctx.save();
										ctx.restore();
									}
									console.log("```````````````````````````````````````````1")
									ctx.save();
									ctx.font = "15px Microsoft YaHei";
									ctx.fillStyle = "#FFFFFF";
									ctx.textBaseline = "middle";
									ctx.fillText('与【'+this.info.username+'】一起在若免', this.posterData['conBCName'].left, this.posterData['conBCName'].top + 11);
									ctx.save();
									ctx.restore();
									ctx.font = "12px Microsoft YaHei";
									ctx.fillStyle = "#FFFFFF";
									ctx.textBaseline = "middle";
									ctx.fillText('分享好物，更多惊喜等你搜寻！', this.posterData['conBCIntro'].left, this.posterData['conBCIntro'].top + 9);
									ctx.save();
									ctx.restore();
									ctx.setFillStyle("#FFFFFF");
									ctx.fillRect(this.posterData['conBR'].left,this.posterData['conBR'].top,this.posterData['conBR'].width,this.posterData['conBR'].height);
									// #ifdef MP-WEIXIN
									let fsm = wx.getFileSystemManager();  //文件管理器
									let FILE_BASE_NAME = new Date().getTime(); //文件名
									let format = 'png'; //文件后缀
									console.log(this.codeImg)
									let buffer = wx.base64ToArrayBuffer(this.codeImg.split(",")[1]); //base 转二进制
									let filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
									console.log(filePath)
									fsm.writeFile({ //写文件
									      filePath,
									      data: buffer,
									      encoding: 'binary',
									      success:rem1=>{
									
									        wx.getImageInfo({ //读取图片
									          src: filePath,
									          success: rem2=> {
									
									            ctx.drawImage(rem2.path,this.posterData['conBRImg'].left,this.posterData['conBRImg'].top,this.posterData['conBRImg'].width,this.posterData['conBRImg'].height) //画图
									            ctx.save();
									            console.log("```````````````````````````````````````````2",ctx)
									            ctx.draw(false, (() => {
									            	console.log("```````````````````````````````````````````3")
									            	let _this = this;
									            	setTimeout(function() {
									            		uni.canvasToTempFilePath({
									            			canvasId: 'mycan',
									            			fileType: 'jpg',
									            			x: 0,
									            			y: 0,
									            			quality:1,
									            			success: function(res) {
									            				console.log(res.tempFilePath)
									            				// 在这里保存图片
									            				uni.saveImageToPhotosAlbum({
									            					filePath: res.tempFilePath,
									            					success: function() {
																		uni.hideLoading()
									            						uni.showToast({
									            							icon: 'none',
									            							position: 'bottom',
									            							title: "图片已下载至【图库】，请打开【图库】查看", // res.tempFilePath
									            						});
									            					},
									            					fail:err=>{
									            						console.log(err)
									            					}
									            				});
									            			},
									            			fail: function(error) {
									            				console.log(error)
									            			},							})
									            	}, 500)
									            })())
									          },
									          error(res) {
									            console.log({
									              res
									            })
									          }
									        })
									      },
										  fail:err=>{
											  console.log(err)
										  }
									    })
									// #endif
									// #ifdef APP
									ctx.drawImage(this.codeImg,this.posterData['conBRImg'].left,this.posterData['conBRImg'].top,this.posterData['conBRImg'].width,this.posterData['conBRImg'].height);
									ctx.save();
									console.log("```````````````````````````````````````````2")
									ctx.draw(false, (() => {
										console.log("```````````````````````````````````````````3")
										let _this = this;
										setTimeout(function() {
											uni.canvasToTempFilePath({
												canvasId: 'mycan',
												fileType: 'jpg',
												x: 0,
												y: 0,
												quality:1,
												success: function(res) {
													console.log(res.tempFilePath)
													// 在这里保存图片
													uni.saveImageToPhotosAlbum({
														filePath: res.tempFilePath,
														success: function() {
															uni.hideLoading()
															uni.showToast({
																icon: 'none',
																position: 'bottom',
																title: "图片已下载至【图库】，请打开【图库】查看", // res.tempFilePath
															});
														},
														fail:err=>{
															console.log(err)
														}
													});
												},
												fail: function(error) {
													console.log(error)
												},							})
										}, 500)
									})())
									// #endif
								})
							})
						})
					})
				})
				
			},
			getImageInfo(url,name) {
				// console.log("```````````````````img")
				return new Promise((resolve, reject) => {
					// console.log("```````````````````img1",url)
					// #ifdef MP-WEIXIN
					
					wx.getImageInfo({
						src: url,
						success(res) {
							console.log(url)
							console.log(res)
							// console.log("```````````````````img2")
							resolve(res)
						},
						fail:err=>{
							// console.log("```````````````````img3")
							console.log(err)
						},
						complete:err=>{
							// console.log("```````````````````img4")
							console.log(err)
						}
					})
					// #endif
					// #ifdef APP
					uni.getImageInfo({
						src: url,
						success(res) {
							console.log(res)
							// console.log("```````````````````img2")
							resolve(res)
						},
						fail:err=>{
							// console.log("```````````````````img3")
							console.log(err)
						},
						complete:err=>{
							// console.log("```````````````````img4")
							console.log(err)
						}
					})
					// #endif
					
				})
			},
			getElementInfo(name) {
				let _this = this;
				return new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + name).boundingClientRect(data => {
						_this.posterData[name] = data;
						resolve(data)
					}).exec();
				})

			},
			getDistrict() {
				let obj = {};
				if (this.id) {
					obj.user_id = this.id;
					this.$u.api.indexUserBusinessAreasList(obj).then(res => {
						console.log(res)
						this.districtList = res.data.list.map(cur => {
							cur.distance = app.$vm.getDistance(Number(cur.dimension), Number(cur.longitude));
							return cur;
						});
					})
				} else {
					obj.user_id = uni.getStorageSync("userId");
					this.$u.api.userBusinessAreasList(obj).then(res => {
						console.log(res)
						this.districtList = res.data.list.map(cur => {
							cur.distance = app.$vm.getDistance(Number(cur.dimension), Number(cur.longitude));
							return cur;
						});
					})
				}
				
			},
			getVideoUrl(url) {
				return app.$vm.globalData.imgBaseUrl + url + app.$vm.globalData.videoThumb;
			},
			getImage(url) {
				if (url && (url.indexOf("http://") != -1 || url.indexOf("https://") != -1)) {
					return url;
				} else {
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getUser() {
				let obj = {};
				if(this.id){
					obj.user_id = this.id;
					this.$u.api.indexUserDetails(obj).then(res => {
						console.log(res)
						this.info = res.data.data;
					})
					this.$u.api.indexShareSum(obj).then(res => {
						console.log(res)
						this.giveNum = res.data.data;
					})
					this.$u.api.indexShareCount(obj).then(res => {
						console.log(res)
						this.conNum = res.data.data;
					})
				}else{
					obj.user_id = uni.getStorageSync("userId");
					this.$u.api.userDetails(obj).then(res => {
						console.log(res)
						this.info = res.data.data;
					})
					this.$u.api.shareSum(obj).then(res => {
						console.log(res)
						this.conNum = res.data.data;
					})
					this.$u.api.shareCount(obj).then(res => {
						console.log(res)
						this.giveNum = res.data.data;
					})
				}
			},
			getList() {
				let obj = {};
				if (this.id) {
					obj.user_id = this.id;
				} else {
					obj.user_id = uni.getStorageSync("userId");
				}
				this.$u.api.talentAuthenticationList(obj).then(res => {
					console.log(res)
					this.cardList = res.data.list;
				})
			},
			getConList() {
				let obj = {};
				obj.page = this.page;
				obj.data = {};
				if (this.id) {
					obj.data.user_id = this.id;
				} else {
					obj.data.user_id = uni.getStorageSync("userId");
				}
				if (uni.getStorageSync("rmToken")) {
					this.$u.api.shareList(obj).then(res => {
						console.log(res)
						if (this.page == 1) {
							this.list = [];
							setTimeout(()=>{
								for (let i = 0; i < res.data.list.data.length; i++) {
									let cur = res.data.list.data[i];
									if(cur.ShareImage.length>0){
										if (app.$vm.isImage(cur.ShareImage[0].image_url)) {
											cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
											cur.imgType = true;
										} else {
											cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
											cur.imgType = false;
										}
									}else{
										cur.imgType = true;
									}
									cur.userImg = this.getImage(cur.user.image_url);
									this.list.push(cur)
								}
							},300)
							
							this.$forceUpdate();
						} else {
							setTimeout(()=>{
								for (let i = 0; i < res.data.list.data.length; i++) {
									let cur = res.data.list.data[i];
									if(cur.ShareImage.length>0){
										if (app.$vm.isImage(cur.ShareImage[0].image_url)) {
											cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
											cur.imgType = true;
										} else {
											cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
											cur.imgType = false;
										}
									}else{
										cur.imgType = true;
									}
									cur.userImg = this.getImage(cur.user.image_url);
									this.list.push(cur)
								}
							},300)
							
							this.$forceUpdate();
						}
						console.log(this.list)
						if(this.page<res.data.list.last_page){
							this.moreFlag = true;
						}else{
							this.moreFlag = false;
						}
					})
				} else {
					this.$u.api.indexShareList(obj).then(res => {
						if (this.page == 1) {
							// this.list = res.data.list.data.map(cur=>{
							// 	if(app.$vm.isImage(cur.ShareImage[0].image_url)){
							// 		cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
							// 		cur.imgType = true;
							// 	}else{
							// 		cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
							// 		cur.imgType = false;
							// 	}
							// 	return cur;
							// });
							this.list = [];
							setTimeout(()=>{
								for (let i = 0; i < res.data.list.data.length; i++) {
									let cur = res.data.list.data[i];
									if(cur.ShareImage.length>0){
										if (app.$vm.isImage(cur.ShareImage[0].image_url)) {
											cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
											cur.imgType = true;
										} else {
											cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
											cur.imgType = false;
										}
									}else{
										cur.imgType = true;
									}
									cur.userImg = this.getImage(cur.user.image_url);
									this.list.push(cur)
								}
							},300)
							
							this.$forceUpdate();
						} else {
							// this.list = this.list.concat(res.data.list.data.map(cur=>{
							// 	if(app.$vm.isImage(cur.ShareImage[0].image_url)){
							// 		cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
							// 		cur.imgType = true;
							// 	}else{
							// 		cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
							// 		cur.imgType = false;
							// 	}
							// 	return cur;
							// }));
							setTimeout(()=>{
								for (let i = 0; i < res.data.list.data.length; i++) {
									let cur = res.data.list.data[i];
									if(cur.ShareImage.length>0){
										if (app.$vm.isImage(cur.ShareImage[0].image_url)) {
											cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
											cur.imgType = true;
										} else {
											cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
											cur.imgType = false;
										}
									}else{
										cur.imgType = true;
									}
									cur.userImg = this.getImage(cur.user.image_url);
									this.list.push(cur)
								}
							},300)
							
							this.$forceUpdate();
						}
						console.log(this.list)
						if(this.page<res.data.list.last_page){
							this.moreFlag = true;
						}else{
							this.moreFlag = false;
						}
					})
				}
			},
			toWebView(e) {
				let url = e.target.dataset.url || e.currentTarget.dataset.url;
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: "/pages/pagefive/pages/webView/webView?url="+encodeURIComponent(url)
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.showModal({
					title:"请打开浏览器粘贴后查看详情",
					content:"受系统限制，小程序不支持第三方平台链接跳转。",
					confirmText:"去粘贴",
					success:res=>{
						if(res.confirm){
							uni.setClipboardData({
								data:url
							})
						}
					}
				})
				// #endif
			},
			toReal() {
				uni.navigateTo({
					url: "/pages/pagefour/pages/real/real"
				})
			},
			// 创建
			create() {
				// #ifdef APP-PLUS
				this.view = new plus.nativeObj.View('bottom-btn', {
						bottom: '0px',
						left: '0px',
						height: '60px',
						width: '100%',
						backgroundColor: '#F35A34'
					},
					[{
							tag: 'img',
							id: 'img',
							src: '../../static/mine/Docking.png',
							position: {
								bottom: '15px',
								left: '125px',
								width: '30px',
								height: '30px',
							}
						},
						{
							tag: 'font',
							id: 'font',
							text: '对接合作',
							textStyles: {
								size: '15px',
								color: '#ffffff',
							}
						}
					]);
				// 监听点击事件
				this.view.addEventListener("click", () => {
					console.log('点击了按钮');
				}, false);

				// 显示按钮
				this.shows()
				// #endif
			},
			// 释放 关闭页面必须释放控件
			close() {
				this.view.close()
				this.view = null
			},
			// 显示按钮
			shows() {
				if (!this.view) {
					this.create()
					return false;
				}
				this.view.show();
			},
			// 隐藏按钮
			hide() {
				this.view && this.view.hide()
			},
			tocardPoster() {
				uni.navigateTo({
					url: "/pages/pageone/pages/card-Poster/card-Poster"
				})
			},
			//详情
			toFindDetail(e) {
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				if (type) {
					uni.navigateTo({
						url: "/pages/pagetwo/pages/FindDetail/FindDetail?id=" + id
					})
				} else {
					uni.navigateTo({
						url: "/pages/pagefive/pages/VideoDetail/VideoDetail?id=" + id
					})
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.conB {
		width: 100%;
		margin-top: 24upx;
		display: flex;
		box-sizing: border-box;
		padding: 0 10upx;
		align-items: center;
		height: 138upx;
	}

	.conBL {
		width: 124upx;
		height: 124upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: white;
		margin-right: 16upx;
	}

	.conBL>image {
		width: 112upx;
		height: 112upx;
		border-radius: 50%;
	}

	.conBC {
		width: calc(100% - 154upx);
		height: 138upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.conBC>view:nth-child(1) {
		font-size: 30upx;
		line-height: 42upx;
		color: white;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		margin-bottom: 8upx;
	}

	.conBC>view:nth-child(2) {
		font-size: 24upx;
		line-height: 34upx;
		color: white;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		// margin-bottom: 8upx;
	}

	.conBR {
		width: 138upx;
		height: 138upx;
		background: white;
		border-radius: 8upx;
		margin-left: 16upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.conBR>image {
		width: 114upx;
		height: 114upx;
		border-radius: 8upx;
	}



	.conCardList {
		margin-top: 32upx;
	}

	.conCardItem {
		width: 100%;
		height: 126upx;
		box-sizing: border-box;
		padding: 20upx 30upx 26upx 20upx;
		display: flex;
		align-items: center;
		background-image: url(../../static/share/shareItem.png);
		background-position: 0 0;
		background-size: 100% 100%;
		margin-bottom: 20upx;
	}

	.conCardItem:last-child {
		margin-bottom: 0;
	}

	.cardAvator {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin-right: 12upx;
	}

	.cardShareIcon {
		width: 54upx;
		height: 52upx;
		margin-left: 12upx;
	}

	.cardInfo {
		width: calc(100% - 158upx);
		height: 80upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.cardInfo>view:nth-child(1) {
		font-size: 28upx;
		color: #3F3F3F;
		font-weight: bold;
		line-height: 40upx;
		margin-bottom: 6upx;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cardInfo>view:nth-child(2) {
		display: flex;
		align-items: center;
	}

	.cardInfo>view:nth-child(2)>view {
		font-size: 24upx;
		color: #3F3F3F;
		line-height: 34upx;
	}

	.cardInfo>view:nth-child(2)>view:nth-child(1) {
		margin-right: 20upx;
	}


	.conT {
		width: 100%;
		box-sizing: border-box;
		padding: 56upx 40upx 58upx;
		border-radius: 16upx;
		background: white;
	}

	.conAvator {
		width: 100%;
		height: 124upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.conAvatorL {
		width: 124upx;
		height: 124upx;
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16upx;
		position: relative;
	}

	.avatorBack {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.avatorCon {
		width: 112upx;
		height: 112upx;
		border-radius: 50%;
		position: relative;
		z-index: 9;
	}

	.conAvatorR {
		width: calc(100% - 140upx);
		height: 124upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.conAvatorRT {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.conAvatorRT>view {
		font-size: 32upx;
		line-height: 44upx;
		color: #3F3F3F;
		font-weight: bold;
	}

	.conAvatorRT>image {
		width: 18upx;
		height: 28upx;
		margin-left: 8upx;
	}

	.conAvatorRB {
		font-size: 28upx;
		color: #3F3F3F;
		line-height: 40upx;
		margin-top: 16upx;
	}

	.conUserMsg {
		margin-top: 16upx;
		width: 100%;
		line-height: 40upx;
		color: #3F3F3F;
		font-size: 28upx;
		white-space: pre-wrap;
	}




	.backLTxt {
		width: 102upx;
		height: 50upx;
		position: absolute;
		top: 64upx;
		left: 34upx;
		z-index: 1;
	}

	.backRDr {
		width: 190upx;
		height: 52upx;
		position: absolute;
		right: 36upx;
		top: 64upx;
		z-index: 1;
	}

	.poster {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 122upx 32upx 24upx;
		z-index: -1;
		opacity: 0;
	}

	.backT {
		width: 100%;
		height: 202upx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.backMain {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -3;
	}

	.backB {
		width: 100%;
		height: 548upx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -2;
	}

	.addReal {
		width: 100%;
		height: 72upx;
		box-sizing: border-box;
		border: 2upx dashed #FFAC3F;
		background: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 16upx;
		border-radius: 20upx;
	}

	.addReal>image {
		width: 24upx;
		height: 24upx;
		margin-right: 14upx;
	}

	.addReal>text {
		font-size: 24upx;
		color: #FFAC3F;
	}

	.Business-card {
		background-color: #F3F3F3;
		min-height: 100vh;
		overflow: auto;

		// padding-bottom: 140upx;
		.IconBox {
			padding: 0 24upx;
		}

		.BusinessCardBox {
			padding-bottom: 150upx;

			.BusinessCard_top {
				position: relative;
				// height: 348upx;

				.topBmg {
					width: 750upx;
					height: 114upx;
					background-color: #FFAC3F;
				}
				.userInfoT{
					display: flex;
				}
				.userInfo {
					// position: absolute;
					// top: 24upx;
					// left: 50%;
					// display: flex;
					// flex-direction: column;
					// justify-content: space-between;
					// align-items: center;
					width: 702upx;
					// height: 312upx;
					background: #FFFFFF;
					opacity: 1;
					border-radius: 20upx;
					padding: 32upx 24upx;
					margin: -90upx auto 0;
					.userImage {
						width: 112upx;
						height: 112upx;
						border-radius: 50%;
						margin-right: 16upx;
					}
					.userInfoB{
						width: calc(100% - 128upx);
						padding-top: 10upx;
					}
					.userNameBox {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 16upx;
						.userName {
							font-size: 32upx;
							font-family: Source Han Sans CN;
							font-weight: 600;
							color: #333333;
							line-height: 40upx;
							max-width: calc(100% - 116upx);
						}
						.shareTxt{
							width: 96upx;
							height: 40upx;
							line-height: 40upx;
							text-align: center;
							border-radius: 4upx;
							color: white;
							background: #FFAC3F;
							font-size: 24upx;
						}

						.Grade {
							width: 44upx;
							height: 24upx;
							background: #FF5555;
							opacity: 1;
							border-radius: 12upx;
							font-size: 16upx;
							color: #fff;
							margin-left: 8upx;
							text-align: center;
							line-height: 24upx;
						}
					}

					.autograph {
						font-size: 20upx;
						color: #999999;
						font-weight: 400;
					}
					.userIntro{
						font-size: 24upx;
						line-height: 32upx;
						color: #333333;
						margin-top: 24upx;
					}
					.address {
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
						display: flex;
						align-items: center;
						margin-top: 24upx;
						>view{
							display: flex;
							align-items: center;
							margin-right: 48upx;
							image{
								width: 24upx;
								height: 26upx;
								margin-right: 8upx;
							}
							>view{
								font-size: 20upx;
								line-height: 26upx;
								color: #333333;
								>text{
									font-size: 20upx;
									line-height: 26upx;
									color: #999999;
								}
							}
						}
						>view:last-child{
							margin-right: 0;
						}
					}

					.settingIcon {
						position: absolute;
						top: 24upx;
						right: 24upx;
					}
				}
			}

			.TiktokBox {
				padding: 24upx;

				.TiktokItem {
					position: relative;
					display: flex;
					width: 702upx;
					background: #FFFFFF;
					opacity: 1;
					border-radius: 20upx;
					padding: 32upx 24upx;
					margin-bottom: 16upx;

					.TiktokImage {
						width: 48upx;
						height: 48upx;
						border-radius: 50%;
						overflow: hidden;
						// background-color: #F0AD4E;
						margin-right: 16upx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.TiktokInfo {
						width: calc(100% - 64upx);

						.TiktokNameBox {
							display: flex;
							justify-content: space-between;
							align-items: center;
							position: relative;

							.moneyWrap {
								height: 32upx;
								line-height: 32upx;
								padding: 0 12upx;
								border-radius: 20upx 0 0 20upx;
								font-size: 16upx;
								color: white;
								background: linear-gradient(206deg, #FAD96C 0%, #FFAC3F 100%);
								position: absolute;
								right: -24upx;
								top: 50%;
								transform: translateY(-50%);
							}

							.info_L {
								display: flex;
								align-items: center;

								.TiktokName {
									font-size: 20upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #333333;
								}

								.deliciousBox {
									display: flex;
									align-items: center;
									margin-left: 24upx;

									.deliciousItem {
										background: #EEEEEE;
										opacity: 1;
										border-radius: 8upx;
										padding: 8upx;
										display: inline-block;
										margin-right: 16upx;
										font-size: 16upx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #D0D0D0;
									}
								}
							}

							.info_R {
								display: flex;
								align-items: center;

								.see {
									font-size: 20upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #FFAC3F;
									margin-right: 16upx;
								}
							}
						}

						.giveBox {
							display: flex;
							align-items: center;
							margin-top: 16upx;

							.giveItem {
								margin-right: 32upx;
								font-size: 20upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #666666;
							}
						}
					}

					.IconBox {
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						right: 0;
						bottom: 0;
						width: 68upx;
						height: 32upx;
						background: #260A20;
						opacity: 1;
						border-radius: 20upx 0 20upx 0;

						image {
							width: 24upx;
							height: 24upx;
						}
					}

					.BookImage {
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						right: 0;
						bottom: 0;
						width: 68upx;
						height: 32upx;
						opacity: 1;
						border-radius: 20upx 0 20upx 0;
						background: #F40A0B;

						image {
							width: 38upx;
							height: 16upx;
						}
					}

					.publicImage {
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						right: 0;
						bottom: 0;
						width: 68upx;
						height: 32upx;
						opacity: 1;
						border-radius: 20upx 0 20upx 0;
						background: #F36326;

						image {
							width: 20upx;
							height: 20upx;
						}
					}

					.microImage {
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						right: 0;
						bottom: 0;
						width: 68upx;
						height: 32upx;
						opacity: 1;
						border-radius: 20upx 0 20upx 0;
						background: #FFD974;

						image {
							width: 24upx;
							height: 22upx;
						}
					}
				}
			}

			.CreativeBox {
				padding: 24upx;

				.CreativeTitle {
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-bottom: 16upx;
				}

				.CreativeList {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.foodItem {
						width: 342upx;
						background: #FFFFFF;
						opacity: 1;
						border-radius: 8upx;
						margin-bottom: 16upx;
						overflow: hidden;
					
						.foodImage {
							position: relative;
							width: 342upx;
					
							// height: 360upx;
							// border: 8upx  8upx   0 0;
							.playIcon {
								position: absolute;
								top: 20upx;
								right: 20upx;
							}
					
							/deep/.uni-video-container {
								background-color: #fff;
							}
					
							// video{
							// 	width: 100%;
							// 	height: 100%;
							// }
							// image{
							// 	width: 100%;
							// 	height: 100%;
							// }
						}
					
						.foodName {
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							padding: 16upx;
						}
					
						.food_B {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 16upx;
					
							.userInfo {
								display: flex;
								align-items: center;
					
								.userImage {
									width: 32upx;
									height: 32upx;
									border-radius: 50%;
									overflow: hidden;
					
									image {
										width: 100%;
										height: 100%;
										border-radius: 50%;
									}
								}
					
								.userName {
									font-size: 16upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #333333;
									margin-left: 8upx;
								}
							}
					
							.giveBox {
								display: flex;
								align-items: center;
					
								.giveNum {
									font-size: 16upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #333333;
									margin-left: 4upx;
								}
							}
						}
					}
					.CreativeItem {
						width: 342upx;
						background: #FFFFFF;
						opacity: 1;
						border-radius: 8upx;
						margin-bottom: 32upx;

						.CreativeImage {
							position: relative;
							width: 342upx;
							height: 360upx;
							border-radius: 8upx 8upx 0 0;
							overflow: hidden;

							// background-color: #F0AD4E;
							.playIcon {
								position: absolute;
								top: 20upx;
								right: 20upx;
							}

							/deep/.uni-video-container {
								background-color: #fff;
							}

							video {
								width: 100%;
								height: 100%;
							}

							image {
								width: 100%;
								height: 100%;
							}
						}

						.CreativeName {
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							padding: 16upx;
						}

						.CreativeUser {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 16upx;

							.UserInfo {
								display: flex;
								align-items: center;

								.userImageBox {
									width: 32upx;
									height: 32upx;
									background-color: #F0AD4E;
									border-radius: 50%;
									opacity: 1;
									overflow: hidden;

									image {
										width: 100%;
										height: 100%;
									}
								}

								.userNames {
									font-size: 16upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #333333;
									margin-left: 8upx;
								}
							}

							.likeBox {
								display: flex;
								align-items: center;

								.likeNum {
									font-size: 16upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #333333;
									margin-left: 4upx;
							}
								}
						}
					}
				}
			}

			.DockingBox {
				position: fixed;
				bottom: 0;
				width: 750upx;
				height: 140upx;
				background: #FFFFFF;
				opacity: 1;
				padding: 16upx 24upx;
				z-index: 9999;

				.DockingNameBox {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 702upx;
					height: 100upx;
					background: linear-gradient(180deg, #FC8643 0%, #F35A34 100%);
					opacity: 1;
					border-radius: 8upx;

					.DockingName {
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 8upx;
					}
				}
			}
		}
	}
</style>
